import React from 'react'
import G6 from '@antv/g6'
import { isArray } from 'lodash'

const textEdge = [
	'textEdgeR',
	{
		draw(cfg, group) {
			const { style, startPoint, endPoint, iconCfg } = cfg
			const { startArrow, endArrow } = style

			const sX = (startPoint.x + endPoint.x) / 2
			const sY = (startPoint.y + endPoint.y) / 2
			const mX = iconCfg && iconCfg.width && iconCfg.width / 2
			const mY = iconCfg && iconCfg.height

			const keyShape = group.addShape('image', {
				attrs: {
					x: sX + (mX || 15) + 10,
					y: sY - (mY || 30) - 12,
					width: 30,
					height: 30,
					img: cfg.img || '',
					...cfg.iconCfg,
				},
				name: 'icon',
			})

			group.addShape('path', {
				attrs: {
					path: [
						['M', startPoint.x + 70, startPoint.y],
						['L', endPoint.x - 20, endPoint.y],
					],
					stroke: style.stroke,
					fill: style.fill,
					lineWidth: 2,
					startArrow: startArrow && {
						// 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
						path: startArrow.path || 'M 0,0 L 10,5 L 10,-5 Z',
						// 箭头的偏移量，负值代表向 x 轴正方向移动
						// d: -10,
						// v3.4.1 后支持各样式属性
						fill: startArrow.fill || '#333',
						stroke: startArrow.stroke || '#666',
						opacity: startArrow.opacity || 0.8,
					},
					endArrow: endArrow && {
						// 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
						path: endArrow.path || 'M 0,0 L 10,5 L 10,-5 Z',
						// 箭头的偏移量，负值代表向 x 轴正方向移动
						// d: -10,
						// v3.4.1 后支持各样式属性
						fill: endArrow.fill || '#333',
						stroke: endArrow.stroke || '#666',
						opacity: endArrow.opacity || 0.8,
					},
				},
				name: 'path-shape',
			})

			return keyShape
		},
	},
	'line',
]

export default textEdge
